<template>
  <div class="mall-details-container">
    <div class="details-header">
      <div class="details-title">
        <p>{{ item.name }}</p>
        <ul>
          <li>
            <router-link to>概述</router-link>
          </li>
          <li>
            <router-link to>参数</router-link>
          </li>
          <li>
            <router-link to>用户评价</router-link>
          </li>
        </ul>
      </div>
    </div>

    <div class="mall-main">
      <div class="details-content-left">
        <el-carousel height="560px" v-if="itemImageList.length !==0">
          <el-carousel-item v-for="itemImage in itemImageList" :key="itemImage.id">
            <img :src="getImageUrl(itemImage.imageUrl)" :alt="item.description" style="width: 500px;height: 560px" />
          </el-carousel-item>
        </el-carousel>
        <div v-if="itemImageList.length === 0 && item.id">
          <img :src="getImageUrl(item.imageUrl)" :alt="item.description" style="width: 500px;height: 560px"/>
        </div>
      </div>

      <div class="mall-content-right">
        <h1>{{ item.name }}</h1>
        <p style="color: #b0b0b0; padding-top: 10px">{{ item.description }}</p>
        <div class="details-price">
          <span>{{ item.salePrice }}元</span>
          <span v-show="item.price != item.salePrice" class="details-price-del">{{ item.price }}元</span>
        </div>
        <div class="details-pro-list">
          <span>{{ item.name }}</span>
          <span style="float: right">
            <span>{{ item.salePrice }}元</span>
            <span v-show="item.price != item.salePrice" style="margin-left: 10px; text-decoration: line-through">{{ item.price }}元</span>
          </span>
          <p style="color: #ff6700; font-size: 24px; padding-top: 20px">总计 : {{ item.salePrice }}元</p>
        </div>

        <el-button @click="addCart" type="warning" style="width: 340px">加入购物车</el-button>
        <el-button @click="addOrder" v-loading.fullscreen.lock="fullscreenLoading" type="danger" style="width: 260px">
          购买
        </el-button>
        <div class="details-pro-policy">
          <ul>
            <li><i class="el-icon-circle-check"></i> 7天无理由退货</li>
            <li><i class="el-icon-circle-check"></i> 7天价格保护</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import { mixin } from '@/mixins'
import { SPACE, insert, selectById, selectListByForeignId } from '@/api/baseApi'
export default {
  mixins: [mixin],
  data() {
    return {
      id: '',
      item: {},
      itemImageList: [],
      fullscreenLoading: false
    }
  },
  activated() {
    if (this.$route.query.id !== undefined) {
      this.id = this.$route.query.id
      this.findItemDetails()
      this.findItemImage()
    }
  },
  watch: {
    $route: function (val) {
      if (val.path === '/item/details' && val.query.typeId !== undefined) {
        this.id = this.$route.query.id
        this.findItemDetails()
      }
    }
  },
  methods: {
    ...mapActions(['setCartCount']),
    ...mapGetters(['getCartCount', 'getUser']),
    // 添加购物车
    addCart() {
      const user = this.getUser()
      if (!user) {
        this.$router.push('/login')
      } else {
        const cart = {
          userId: user.id,
          itemId: this.item.id,
          itemCount: 1
        }
        insert(SPACE.cart, cart).then(res => {
          if (res.state === 200) {
            this.showSuccess()
            this.setCartCount(this.getCartCount() + 1)
          } else if (res.state === 400) {
            this.showError('您的购物车已经存在该商品，快去看看吧')
          }
        })
      }
    },
    // 添加订单
    addOrder() {
      const user = this.getUser()
      if (!user) this.$router.push('/login')
      else {
        this.fullscreenLoading = true
        const cartList = [{ userId: user.id, itemId: this.item.id, itemCount: 1, item: this.item }]
        insert(SPACE.order, cartList).then(res => {
          setTimeout(() => {
            if (res.state === 200) {
              this.$router.push({ path: '/order/confirm', query: { id: res.data.id } })
              this.fullscreenLoading = false
            }
          }, 500)
        })
      }
    },
    // 查询商品详情
    async findItemDetails() {
      selectById(SPACE.item, this.id).then(res => {
        this.item = res.state === 200 ? res.data : {}
      })
    },
    // 查询商品轮播图
    async findItemImage() {
      selectListByForeignId(SPACE.itemImage, this.id).then(res => {
        console.log(JSON.stringify(res.data))
        this.itemImageList = res.state === 200 ? res.data : []
        console.log(this.itemImageList)
      })
    }
  }
}
</script>
<style scoped>
.details-header {
  max-width: 1225px;
  margin: 0 auto;
  margin-top: 20px;
  padding: 0 20px;
  height: 64px;
  z-index: 4;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
}
.details-header .details-title {
  height: 64px;
  line-height: 64px;
  font-size: 18px;
  font-weight: 400;
  color: #212121;
}
.details-header .details-title p {
  float: left;
}
.details-header .details-title > ul {
  float: right;
}
.details-header .details-title > ul li {
  float: left;
  margin: 0 10px;
}
.details-header .details-title > ul li a {
  font-size: 14px;
  color: #616161;
}
.details-header .details-title > ul li a:hover {
  font-size: 14px;
  color: #ff6700;
}

.mall-main {
  height: 560px;
  padding-top: 30px;
  background: #fff;
  max-width: 1225px;
  padding: 20px;
}
.mall-main .details-content-left {
  float: left;
  width: 560px;
  height: 560px;
}
.mall-main .mall-content-right {
  float: left;
  margin-left: 25px;
  width: 640px;
}

.mall-main .mall-content-right .details-price {
  display: block;
  font-size: 18px;
  color: #ff6700;
  border-bottom: 1px solid #e0e0e0;
  padding: 25px 0 25px;
}
.mall-main .mall-content-right .details-price .details-price-del {
  font-size: 14px;
  margin-left: 10px;
  color: #b0b0b0;
  text-decoration: line-through;
}
.mall-main .mall-content-right .details-pro-list {
  background: #f9f9fa;
  padding: 30px 60px;
  margin: 50px 0 50px;
}

.mall-main .mall-content-right .button .el-button {
  float: left;
  height: 55px;
  font-size: 16px;
  color: #fff;
  border: none;
  text-align: center;
}
.mall-main .mall-content-right .details-pro-policy li {
  float: left;
  margin-right: 20px;
  color: #b0b0b0;
}
</style>
